<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <ul>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
      </ul>

      <script>
            // 添加事件，获取下标;
            // var lis = document.querySelectorAll("li");
            // for(var i = 0 ; i < lis.length ; i ++){
            //       // 每次循环的时候都创建一个活动对象;
            //       // - 创建10个活动对象;
            //       // - 活动对象里面每个对象都有一个数据; 数据分别是 0 , 1 , 2 .... 9;

            //       lis[i].onclick = function(){
            //             // 获取下标;

            //       }
            // }
            
            // 不会报出匿名函数的语法错误;
            // +function(){
            //       console.log("立即调用的函数")
            // }();
            // 此时经过运算匿名函数已经变成了函数地址;
            // 我们可以直接在地址后面加上() 调用运算, 变成函数的调用;

            // 立即执行的匿名函数;
            // 一般情况下用来 1. 限制作用域 2. 处理闭包;

            
            var lis = document.querySelectorAll("li");
            for(var i = 0 ; i < lis.length ; i ++){
                  // 每次循环的时候都创建一个活动对象;
                  // - 创建10个活动对象;
                  // - 活动对象里面每个对象都有一个数据; 数据分别是 0 , 1 , 2 .... 9;
                  (function( num ){
                  // 形参 === 局部变量;
                  // console.log(num);
                  // 此时的i是具体的数据 0 ~ 9 ;
                        lis[i].onclick = function(){
                              console.log(num);
                        }
                  })( i );
            }
            // 这只是一种技巧，并不是我们需要的最终问题解决方案。
            
      </script>
</body>
</html>